<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>编写Wiki:<%=name%></title>
        <%- include('../layout/common-css.html');%>
        <link rel="stylesheet" href="/simplemde/simplemde.min.css">
        <style type="text/css" media="screen">
        </style>
    </head>
    <body>
        <%- include('../layout/header.html');%>
        <div class="am-panel am-panel-default">
            <div class="am-panel-hd" style="text-align: center;">
                    <h3 class="am-panel-bd">编写Wiki:<%=name%></h3>
            </div>
            <div class="am-panel-bd">
                <form method="post" class="am-form">
                  <div class="am-form-group">
                      <textarea id="editor"><%-content%></textarea>
                  </div>
                  <div class="am-form-group am-form-inline">
                    <button type="button" class="am-btn am-btn-success am-btn-lg" onclick="javascript:save_dev_code_manually()"><i class="am-icon-save"></i>保存</button>
                    <a href="/rules/wiki/view/<%=name%>" target="_blank" class="am-btn am-btn-primary am-btn-lg"><i class="am-icon-eye"></i>预览</a>
                  </div>
                </form>
            </div>
            <div class="am-alert am-alert-secondary" id="debug_msg" data-am-alert></div>
        </div>
        <%- include('../layout/bottom-js.html');%>
        <script src="/simplemde/simplemde.min.js"></script>
        <script type="text/javascript">
            var showMessage = function(msg){
              var now = new Date();
              document.getElementById('debug_msg').innerHTML = now.getHours()+':'+now.getMinutes()+':'+now.getSeconds()+' > '+msg;
            }

            var dev_code = document.getElementById('editor').value;
            var dev_code_changed = false;
            var simplemde;

            var save_dev_code = function(callback){
              $.ajax({
                method: "POST",
                url: "putwiki",
                data: { 'name':'<%=name%>', 'content': dev_code }
              })
              .done(function(msg) {
                dev_code_changed = false;
                if(callback)callback();
              });
            }

            var save_dev_code_manually = function(){
              save_dev_code(function(msg){
                showMessage('最新代码已保存');
              });
            }

          window.addEventListener("beforeunload", function (e) {
            if(dev_code_changed){
              var confirmationMessage = "\o/";
              (e || window.event).returnValue = confirmationMessage;     // Gecko and Trident
              return confirmationMessage;                                // Gecko and WebKit
            }
          });

          window.addEventListener('load',function(){
              simplemde = new SimpleMDE({
                element: document.getElementById("editor"),
                spellChecker: false,
              });

              simplemde.codemirror.on('change',function(changed){
                dev_code = simplemde.value();
                dev_code_changed = true;
              });

              window.setInterval(function(){
                if(dev_code_changed){
                  save_dev_code(function(msg){
                    showMessage('最新代码已自动保存');
                  });
                }
              },10000);

          },false);
        </script>
</body>
</html>